<template>
  <el-form ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
    <!--      长链接表单-->
    <el-form-item
        label="长链接"
        prop="age"
        style="margin-bottom: 20px;margin-top: 50px">
      <el-input  style="width: 600px" v-model="longLink" autosize placeholder="请输入长链接内容"></el-input>
    </el-form-item>
    <!--      短链接表单-->
    <el-form-item
        label="短链接">
      <el-input maxlength="5" style="width: 600px" v-model="id" placeholder="自定义短链接（5位）：" ></el-input>
      <el-button v-if=flag type="primary" plain @click="Copy">复制</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" round plain @click="submitForm()" style="width: 100px" >生成</el-button>
      <el-button type="info" round plain @click=" empty">重置</el-button>
    </el-form-item>

  </el-form>

</template>

<script>
export default {
  name: 'Member',
  data() {
    return {
      logoSrc: require('../../img/logo.jpg'),
      flag:false,
      id:'',
      longLink:'',
      shortLink:'',


    }
  },
  methods: {
    Copy() {
      var input = document.createElement("input");   // 直接构建input
      input.value = "http://45q6c23894.qicp.vip/find/"+this.id;  // 设置内容 需要复制的内容
      document.body.appendChild(input);    // 添加临时实例
      input.select();   // 选择实例内容
      document.execCommand("Copy");   // 执行复制
      document.body.removeChild(input); // 删除临时实例
      // alert("链接已复制成功")
      this.$message({   // 这里提示语
        message: "链接已复制成功",
        type: 'warning'
      });
    },
      //清空输入框内容
    empty(){
          this.longLink="";
          this.id="";
          this.flag=false;
      },
    submitForm() {
      this.postRequest("/link/vip?longLink="+this.longLink+"&id="+this.id ).then((resp) => {
        if(resp.code==200){
          this.flag=true;

        }
        this.shortLink =resp.data;
        this.flag=true;

      })
    },
  },
}
</script>

<style scoped>
.addPosInput {
  width: 300px;
  margin-right: 8px;
}

.postMaMa {
  margin-top: 10px;
}

.updatePosInput {
  width: 280px;
  margin-left: 8px;
}
</style>